<template>
	<div>
		<ul class="home-list-top">
			<!--精品贴-->
			<li  @click="tabPostDetails(item.article_id)" v-if="fineData" v-for="(item,index) in fineData" :id="item.article_id">
				<img :src="item.article_img[0]" :class="item.article_img ==''?'topPicNone':'list-topPic'"/>
				<div class="list-topCon">
					<h2>{{item.article_title}}</h2>
					<div class="topCon-plate">
						<div class="topCon-name">
							<div v-if="item.cate_name!=''">
								<img :src="item.user.user_himg" @click.stop="onMaskent(item.article_userId)" :id="item.article_userId"/>
								<p>{{item.user.user_nickname}}</p>
								<span>{{item.cate_name}}</span>
							</div>
							<div v-else>
								<b></b>
								<p>匿名</p>
							</div>
						</div>
						<div class="topCon-comment">
							<img src="../../assets/images/home/home-comment.png"/>
							<span>{{item.num}}</span>
						</div>
					</div>
				</div>
			</li>
			<!--新帖-->
			<li @click="tabPostDetails(item.article_id)" v-if="newPostData" v-for="(item,index) in newPostData" :id="item.article_id">
				<img :src="item.article_img[0]" :class="item.article_img ==''?'topPicNone':'list-topPic'"/>
				<div class="list-topCon">
					<h2>{{item.article_title}}</h2>
					<div class="topCon-plate">
						<div class="topCon-name">
							<div v-if="item.cate_name!=''">
								<img :src="item.user.user_himg" @click.stop="onMaskent(item.article_userId)" :id="item.article_userId"/>
								<p>{{item.user.user_nickname}}</p>
								<span>{{item.cate_name}}</span>
							</div>
							<div v-else>
								<b></b>
								<p>匿名</p>
							</div>
						</div>
						<div class="topCon-comment">
							<img src="../../assets/images/home/home-comment.png"/>
							<span>{{item.num}}</span>
						</div>
					</div>
				</div>
			</li>
			<!--精品更多-->
			<li @click="tabPostDetails(item.article_id)" v-if="moreBoutData" v-for="(item,index) in moreBoutData" :id="item.article_id">
				<img :src="item.article_img[0]" :class="item.article_img ==''?'topPicNone':'list-topPic'"/>
				<div class="list-topCon">
					<h2>{{item.article_title}}</h2>
					<div class="topCon-plate">
						<div class="topCon-name">
							<div v-if="item.cate!=''">
								<img :src="item.user.user_himg" @click.stop="onMaskent(item.article_userId)" :id="item.article_userId"/>
								<p>{{item.user.user_nickname}}</p>
								<span>{{item.cate.cate_name}}</span>
							</div>
							<div v-else>
								<b></b>
								<p>匿名</p>
							</div>
						</div>
						<div class="topCon-comment">
							<img src="../../assets/images/home/home-comment.png"/>
							<span>{{item.num}}</span>
						</div>
					</div>
				</div>
			</li>
			<!--实名-->
			<li @click="tabPostDetails(item.article_id)" v-if="realnameData" v-for="(item,index) in realnameData" :id="item.article_id">
				<img :src="item.article_img[0]" :class="item.article_img ==''?'topPicNone':'list-topPic'"/>
				<div class="list-topCon">
					<h2>{{item.article_title}}</h2>
					<div class="topCon-plate">
						<div class="topCon-name">
							<img :src="item.user_himg" @click.stop="onMaskent(item.article_userId)" :id="item.article_userId"/>
							<p>{{item.user_nickname}}</p>
							<span>{{item.cate.cate_name}}</span>
						</div>
						<div class="topCon-comment">
							<img src="../../assets/images/home/home-comment.png"/>
							<span>{{item.num}}</span>
						</div>
					</div>
				</div>
			</li>
			<!--匿名-->
			<li @click="tabPostDetails(item.article_id)" v-if="anonymousData" v-for="(item,index) in anonymousData" :id="item.article_id">
				<img :src="item.article_img[0]" :class="item.article_img ==''?'topPicNone':'list-topPic'"/>
				<div class="list-topCon">
					<h2>{{item.article_title}}</h2>
					<div class="topCon-plate">
						<div class="topCon-name">
							<b></b>
							<p>匿名</p>
						</div>
						<div class="topCon-comment">
							<img src="../../assets/images/home/home-comment.png"/>
							<span>{{item.num}}</span>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import axios from "axios";
	import qs from 'qs';
	import user from '@/utils/isLogin';
	export default{
		props:['fineData','newPostData','moreBoutData','anonymousData','realnameData'],
		data(){
			return{
				isMask:false,
				value:'',
				isClick:true
			}
		},
		components:{
			
		},
		filters: {
		  url: function (value) {
		    if (!value) return ''
		    value = user.src + value
		    return value
		  }
		},
		created(){
			let plusReady = ()=>{
				
			};
			if(window.plus){
				plusReady();
			}else{
				document.addEventListener("plusready", plusReady, false);
			}
		},
		methods:{
			tabPostDetails(id){
				if(this.isClick){
					this.isClick = false;
					var postDetails = plus.webview.create('postDetails.html','postDetails',{scrollIndicator:'none'},{
						articleId:id,
						type:1
					});
					postDetails.addEventListener("loaded", ()=> {
					    postDetails.show('pop-in', 300);
					    this.isClick = true;
					    postDetails = null;
					}, false);
				}
			},
			//点击头像打开弹框
			onMaskent(id){
				this.isMask = true;
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				var data = qs.stringify({
			   	articleUserid:id,
			   	userId:userId
				})
				axios({
				   method: 'post',
				   url: user.src + '/index/user/is_focus',
				   data:data
				})
				.then((res) => {
					
					if(res.data.status == 200){
						var isfocusData = res.data.data;
						var userName = res.data.data.user_nickname;
						if(res.data.data.focus == 1){
							this.value = '已关注';
						}else{
							this.value =  '关注';
						}
						this.$emit("maskEfocus",[isfocusData,this.isMask,id,userName,this.value])
					}
				})
				.catch((error)=> {
				    console.log(error);
				});
			}
		}
	
	}
</script>

<style lang="less">
	/*html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		box-shadow: 0px 0px 8px 1px #999 inset;
	}
	ul,li{
		margin: 0;
		padding: 0;
	}*/
	.home-list-top{
		min-height: 1050px;
		overflow: hidden;
		li{
			height: 146px;
			border-bottom: 0.1rem solid #ededed;
			padding-top: 16px;
			overflow: hidden;
			.list-topPic{
				width: 170px;
				height: 130px;
				margin-right: 21px;
				float: left;
			}	
			.list-topCon{
				overflow: hidden;
				padding: 22px 0 20px 0;
				h2{
					max-width: 100%;
					font-size: 28px;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.topCon-plate{
					margin-top: 14px;
					display: flex;
					justify-content: space-between;
					.topCon-name{
						img{
							width:46px;
							height: 46px;
							float: left;
							border: 0;
							border-radius: 50%;
						}
						b{
							display: block;
							width:46px;
							height: 46px;
							float: left;
							border-radius: 50%;
							background: #CCCCCC;
							margin-top: 4px;
						}
						p{
							float: left;
							margin-left: 10px;
							margin-top: 14px;
							font-size: 20px;
							color: #23bbff;
						}
						span{
							display: block;
							float: left;
							width: 110px;
							height: 30px;
							line-height: 34px;
							text-align: center;
							font-size: 20px;
							color: #fff;
							background: #06a5df;
							border-radius: 5px;
							margin-top:10px;
							margin-left: 10px;
						}
					}
					.topCon-comment{
						img{
							display: block;
							width: 32px;
							height: 32px;
							margin-top: 14px;
							float: left;
						}
						span{
							display: block;
							font-size: 18px;
							float: left;
							margin-top: 21px;
							margin-left: 10px;
						}
					}
				}
			}
		}
	}
	.topPicNone{
		display: none;
	}
</style>